<template>
  <div class="details">
    <!-- 图书详情 -->
    <div class="detail">
      <div class="up">
        <div class="left">
          <div class="left_con">
            <img :src="api + bookdata.image" alt="" />
          </div>
        </div>
        <div class="right">
          <div class="right_con">
            <div class="title">
              <h1>{{ bookdata.bookname }}</h1>
            </div>
            <p>
              {{ bookdata.press }} / <span>{{ bookdata.author }}</span>
            </p>
            <div class="price_group">
              <div class="price_group1">
                <p>
                  <span class="title">现价</span
                  ><span class="title1">￥{{ bookdata.vipprice }}</span>
                </p>
                <p>
                  <span class="title">原价</span
                  ><span class="title2">￥{{ bookdata.price }}</span>
                </p>
                <p>
                  <span class="title">品相</span
                  ><span class="title3">{{ bookdata.oldnewdegree }}成新</span>
                </p>
              </div>
            </div>
            <label class="booknumber">数量</label>
            <el-input-number
              v-model="count"
              @change="handleChange"
              :min="1"
              :max="bookdata.number"
            ></el-input-number>
            <label class="booknumber1">库存 {{ bookdata.number }} 本</label>
            <div class="but">
              <el-button
                type="primary"
                plain
                @click="addToShopCart()"
                icon="el-icon-shopping-cart-full"
                >加入购物车</el-button
              >
              <el-button
                type="success"
                plain
                @click="Nowbuy()"
                icon="el-icon-thumb"
                >立即购买</el-button
              >
            </div>
          </div>
        </div>
        <div class="right1">
          <div class="useriocn">
            <img :src="api+useriocn" alt="" />
          </div>
          <div class="usernick">{{ usernickname }}</div>
          <p>
            <a
              target="_blank"
              :href="qq"
              ><img
                border="0"
                src="@/assets/images/qq.png"
                alt="点击这里给我发消息"
                title="点击这里给我发消息"
            />点我就可以与卖家聊天啦</a>
          </p>
          <p>注意：电脑QQ在线状态才可以发起与卖家聊天哦</p>
        </div>
      </div>
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="图书简介" name="first">
          <div class="conter">{{ bookdata.content }}</div>
        </el-tab-pane>
        <el-tab-pane label="用户评价" name="second">
          <template v-if="commentdata.length">
            <div class="comments" v-for="item in commentdata" :key="item.index">
              <div class="comment_left">
                <img :src="api + item.user_info.userIcon" alt="" />
                <label>{{ item.user_info.nickname }}</label>
              </div>
              <div class="comment_right">
                <div class="up">{{ item.content }}</div>
                <div class="dwon">
                  <p>
                    <el-rate v-model="item.score" show-text disabled></el-rate>
                  </p>
                  <p>{{ item.createtime }}</p>
                </div>
              </div>
            </div>
          </template>
          <div class="carnull" v-else>
            <span>该商品暂无评论...</span>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 猜你喜欢 -->
    <div class="goodbook">
      <div style="width:100%;height:36px;line-height:36px;display:flex;">
        <span
          style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: 18px;"
        ></span>
        <span style="margin-left: 5px;margin-right:5px; color: #aaaaaa;"
          >猜你喜欢</span
        >
        <span
          style="display:inline-block;flex:1;border-top:1px solid #cccccc;margin-top: 18px;"
        ></span>
      </div>
      <div class="goodbook_down">
        <div
          class="goodbook_down_item"
          v-for="item in sellbooksdata"
          :key="item.id"
          @click="todetails(item.id)"
        >
          <div class="goodbook_down_item_0">
            <div class="goodbook_down_item_1">
              <img :src="api + item.image" alt="" />
            </div>
            <div class="goodbook_down_item_2">
              <span>{{ item.bookname }}</span>
            </div>
            <div class="price">
              <p>￥{{ item.vipprice }}</p>
              <p>￥{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      // score: 5,
      activeName: "first",
      id: this.$route.params.id,
      user_id: sessionStorage.getItem("id"),
      bookdata: [],
      commentdata: [],
      sellbooksdata: [],
      api: this.imageapi,
      count: 1,
      useriocn: "",
      usernickname: "",
      qq: ""
    };
  },
  mounted() {
    this.init();
    this.sellinit();
    this.scoreinit();
  },
  methods: {
    // 计数器
    handleChange(value) {
      console.log(value);
    },
    // 加入购物车
    addToShopCart() {
      const that = this;
      if (!sessionStorage.getItem("loginname")) {
        alert("亲，请先登录！");
        this.$router.push({ name: "login" });
      } else {
        const data = {};
        data.user_id = this.user_id;
        data.book_id = this.id;
        data.bookname = this.bookdata.bookname;
        data.bookimage = this.bookdata.image;
        data.price = this.bookdata.vipprice;
        data.number = this.count;
        that.$http.post("/addshopcart", data).then(() => {
          // console.log(res);
          this.$message({
            showClose: true,
            message: "商品已经加入购物车...",
            type: "success"
          });
        });
      }
    },
    //立即购买
    Nowbuy() {
      const data = [{}];
      data[0].user_id = this.user_id;
      data[0].book_id = this.id;
      data[0].bookname = this.bookdata.bookname;
      data[0].bookimage = this.bookdata.image;
      data[0].price = this.bookdata.vipprice;
      data[0].id = 0;
      data[0].number = this.count;
      data[0].sum = this.count * this.bookdata.vipprice;
      // console.log(data)
      this.$router.push({
        path: "/checkstand",
        query: { data: JSON.stringify(data) }
      });
    },
    // 加载对应id图书的详情
    init() {
      const that = this;
      const id = that.id;
      that.$http
        .post("/detailsbook", { id })
        .then(res => {
          // console.log(res);
          that.bookdata = res.data;
          that.useriocn = res.data.user_info.userIcon;
          that.usernickname = res.data.user_info.nickname;
          that.qq =  "http://wpa.qq.com/msgrd?v=3&uin=" + res.data.user_info.qq + "&site=qq&menu=yes";
          console.log(that.qq)
        })
        .catch(function() {});
    },
    //热销图书
    sellinit() {
      const that = this;
      that.$http
        .get("/showsellbooks")
        .then(res => {
          // console.log(res);
          that.sellbooksdata = res.data;
        })
        .catch(function() {});
    },
    // 好书推荐点击进入详情页
    todetails(id) {
      this.$router.push({ name: "details", params: { id } });
      this.reload(); //页面刷新 无白屏
    },
    //展示图书评价内容
    scoreinit() {
      const that = this;
      that.$http
        .post("/showbookscomments", { id: this.id })
        .then(res => {
          // console.log(res);
          that.commentdata = res.data;
        })
        .catch(function() {});
    }
  }
};
</script>

<style scoped>
.details {
  width: 100%;
}
.detail {
  width: 1200px;
  margin: 10px auto;
}
.detail .up {
  width: 1200px;
  display: flex;
  flex-direction: row;
}
.detail .up .left {
  width: 350px;
  border: 1px solid #eee;
  margin: 10px 10px;
}
.detail .up .left .left_con {
  width: 300px;
  /* height: 400px; */
  margin: 25px auto;
}
.detail .up .left img {
  width: 100%;
  /* height: 100%; */
}
.detail .up .right {
  width: 450px;
  margin: 0px 30px;
}
.detail .up .right_con {
  width: 450px;
  margin: 25px auto;
}
.detail .up .right .title h1 {
  font-weight: bolder;
  font-size: 25px;
  line-height: 1.2;
  color: #333;
}
.detail .up .right p {
  font-size: 18px;
  color: #333;
}
.detail .up .right p span {
  margin-top: 10px;
  font-size: 16px;
  line-height: 16px;
  color: #333;
}
.detail .up .right .price_group {
  background: #fdf6ec;
  margin: 14px 0;
}
.detail .up .right .price_group1 {
  padding: 5px 0;
}
.detail .up .right .price_group1 p {
  height: 29px;
  line-height: 29px;
}
.detail .up .right .price_group1 p .title {
  font-size: 13px;
  margin: 0 20px 0 10px;
  color: #7d7c7c;
}
.detail .up .right1 {
  width: 400px;
  margin-top: 50px;
  text-align: center;
}
.detail .up .right1 .useriocn img {
  width: 80px;
  height: 80px;
  border-radius: 40px;
}
.detail .up .right1 img {
  width: 15px;
  height: 15px;
}
.detail .up .right1 p {
  font-size: 16px;
  color: #888;
}
.booknumber {
  font-size: 15px;
  margin-right: 10px;
  color: #7d7c7c;
}
.booknumber1 {
  font-size: 15px;
  margin-left: 10px;
  color: #7d7c7c;
}
.but {
  margin-top: 10px;
  text-align: left;
}
.detail .up .right .price_group1 .title1 {
  color: #666;
  font-size: 23px;
}
.detail .up .right .price_group1 .title2 {
  font-size: 18px;
  text-decoration: line-through;
}
.detail .up .right .price_group1 .title3 {
  font-size: 15px;
  color: #bf7f5f;
  margin-left: 1px;
  font-weight: bolder;
}
ul,
li {
  list-style: none;
}
li {
  float: left;
}
input {
  text-align: center;
}
.el-button {
  margin-left: 10px;
}
.el-tabs {
  margin-bottom: 20px;
}
.conter {
  font-size: 17px;
  line-height: 1.5;
  color: #606266;
}
.comments {
  width: 100%;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #e4e7ed;
}
.comment_left {
  width: 100px;
  margin: 10px auto;
  text-align: center;
}
.comment_left img {
  width: 50px;
  height: 50px;
  border-radius: 5px;
}
.comment_left label {
  color: #000;
  font-size: 14px;
}
.comment_right {
  margin: 10px 20px;
}
.comment_right .up {
  border: 0;
  font-size: 16px;
  color: #3f3f3f;
}
.comment_right .dwon {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  font-size: 14px;
  color: #898888;
}
.comment_right .dwon p:nth-child(2) {
  margin-left: 50px;
}
.carnull span {
  display: block;
  margin: 50px auto;
  text-align: center;
  font-size: 18px;
}
/* 好书推荐 */
.goodbook {
  width: 1200px;
  margin: 0 auto;
}
.goodbook .goodbook_up {
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #2b57a2;
  border-bottom: 2px solid #dfe2e9;
}
.goodbook .goodbook_up .goodbook_up_left span {
  font-size: 28px;
  font-weight: 600;
}
.goodbook .goodbook_up .goodbook_up_right a {
  color: #2b57a2;
  text-decoration: none;
}
.goodbook .goodbook_up .goodbook_up_right a:active,
.goodbook .goodbook_up .goodbook_up_right a:hover {
  color: #929db0;
}
.goodbook .goodbook_down {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  margin: 10px 0;
}
.goodbook .goodbook_down .goodbook_down_item {
  width: 19%;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin: 0.5%;
}
.goodbook_down_item_0 {
  width: 96%;
  margin: 2%;
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_1 {
  width: 100%;
  height: 250px;
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_1
  img {
  width: 90%;
  height: 90%;
  margin: 5%;
  transition: all 0.6s;
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_1
  img:hover {
  width: 90%;
  height: 90%;
  margin: 5%;
  transform: scale(1.06);
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_2 {
  width: 90%;
  height: 40px;
  font-size: 15px;
  line-height: 1.5;
  color: #303133;
  text-align: left;
  padding: 5px 10px;
  overflow: hidden; /*超出隐藏*/
}
.goodbook
  .goodbook_down
  .goodbook_down_item
  .goodbook_down_item_0
  .goodbook_down_item_2:hover {
  color: #005eff;
}
.price {
  height: 40px;
  text-align: left;
}
.price p {
  display: inline;
}
.price p:nth-child(1) {
  font-size: 20px;
  color: #f40;
}
.price p:nth-child(2) {
  font-size: 17px;
  color: #606266;
  text-decoration: line-through;
  margin-left: 5px;
}
</style>